import React, { Component } from "react";
import { HashRouter as Router, Route, Link, Switch } from "react-router-dom";
// Switch  组件是 只匹配一个路由
// https://reactrouter.com/web/api/Route/component

class Home extends Component {
  render() {
    console.log("Home 组件渲染了,", this.props); // component 模式自动注入路由属性 history location match
    return <h1>Home 组件</h1>;
  }
}
class Product extends Component {
  render() {
    console.log("product 组件渲染了", this.props);
    return <h1>产品</h1>;
  }
}
class Info extends Component {
  render() {
    return <h1>Info 组件</h1>;
  }
}
class App extends Component {
  render() {
    return (
      <Router>
        <Link to="/home">主页</Link>
        <Link to="/product">产品</Link>
        <Link to="/info">信息</Link>
        <Switch>
          <Route path="/" exact component={Home}></Route>
          {/* 第一个渲染模式 component*/}
          <Route path="/home" component={Home}></Route>
          {/*第二种 渲染模式 render 模式*/}
          <Route
            path="/product"
            render={(props) => <Product {...props}></Product>}
          ></Route>
          <Route
            path="/info"
            render={(props) => <Info {...props}></Info>}
          ></Route>
        </Switch>
      </Router>
    );
  }
}

export default App;
